<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
<style type="text/css">
    body{
    background: url("image/2.jpg");

    }
   .div1{
         width: 500px;
       height: 550px;
        border: 2px  indianred solid;
        border-radius: 10px;/*角度*/
        margin: auto;
       position: absolute;
       top: -30px;
       left: 0;
       right: 0;
       bottom: 0;
       background: black;
       opacity:0.5;
}
   .div2{  width: 500px;
       height: 550px;
       border: 2px  indianred solid;
       border-radius: 10px;/*角度*/
       margin: auto;
       position: absolute;
       top: -30px;
       left: 0;
       right: 0;
       bottom: 0;
    }
.input1{
    opacity: 0.5;
}
</style>
    <!--声明js代码域-->
<script type="text/javascript">
    var yzm;
    //创建验证码
    function yzmtext(){
        // 创建四位随机数
         yzm  = Math.floor(Math.random()*9000+1000);
        //将随机数在页面显示
        var span = document.getElementById("span1");
        span.innerHTML = yzm;
        //给span加个图片
     }
        //验证用户名
    function yzname() {
        //获取用户名信息
        var namea = document.getElementById("uname").value
        //正则表达式创建
        var a = /^[\u4e00-\u9fa5]{2,4}$/;
        //效验
        var namespan = document.getElementById("namespan");
        if (namea==null||namea==""){
            namespan.innerHTML ="请输入用户名"
            namespan.style.color="red"
            return false
        }else if(a.test(namea)){
            namespan.innerHTML ="输入正确"
            namespan.style.color="green"
            return true;
        }else {
            namespan.innerHTML ="请按规范输入"
            namespan.style.color="red"
            return false
        }
    }
    //*****************************************************************************************************
    //封装，
    function postting(id,zz,str){
        var uname = document.getElementById(id)
        var name=uname.value
        var b =uname.alt
        var  a = zz
        var span = document.getElementById(id+"span")
        if(name==null||name==""){
            span.innerHTML=  "*"+b+"不能为空"
            span.style.color="red"
            return false
        }else if(a.test(name)){
            span.innerHTML= "*"+ b+"正确"
            span.style.color="green"
            return true;
        }else {
            span.innerHTML= "*"+b+"错误"
            span.style.color="red"
            return false
        }
    }
    function passwordtext() {
         return postting("password",/^[0-9]{6,10}$/);
    }
    function phonetext() {
     return   postting("phone",/^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/);
    }
    function emailtext() {
       return  postting("email",/^^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$$/);
    }
function favtext() {
    var fav = document.getElementsByName("checkbox");
    var ckspan =document.getElementById("checkboxspan");
    for(var i=0;i<fav.length;i++){
        if(fav[i].checked){
            ckspan.innerHTML="选择成功"
            return true;
        }
    }
    ckspan.innerHTML="请选择"
     return false
}



    // function yzmmtext(){
    //     var  yzma = document.getElementById("asas")
    //     var  a = yzma.value
    //     var span = document.getElementById("yzmspan")
    //     if(a==null||a==""){
    //         yzmspana.innerHTML ="请输入验证码"
    //         alert("das")
    //
    //     }else if(yzm ===a){
    //         span.innerHTML ="请输入验证码"
    //     }else {
    //         span.innerHTML ="请输入验证码"
    //     }
    //
    //
    // }
function checkboxtext() {
    document.getElementById("sub").disabled = !document.getElementById("chk").checked
}

function  tijiaopanduan() {
    yzname()
    passwordtext()
    phonetext()
    emailtext()
    favtext()
      return yzname()&& passwordtext()&&phonetext()&&emailtext()&&favtext()
}
 function huanfua() {
     var  a = document.getElementById("body")
     var  b = document.getElementById("diva")
     a.style.background=" url(\"image/a2.jpg\")"
     b.style.backgroundColor = "white"

 }
    function huanfub() {
        var  a = document.getElementById("body")
        var  b = document.getElementById("diva")
        a.style.background=" url(\"image/a1.jpg\")"
        b.style.backgroundColor = "#228B22"
    }
    function huanfuc() {
        var  a = document.getElementById("body")
        var  b = document.getElementById("diva")
        a.style.background=" url(\"image/a3.jpg\")"
        b.style.backgroundColor = "brown"
    }

</script>

</head>
<body  id="body" onload="yzmtext()">
<div align="center">
    <input type="button" onclick="huanfua()" style="background-color: black">
    <input type="button" onclick="huanfub()" style="background-color: blue">
    <input type="button" onclick="huanfuc()" style="background-color: brown">
</div>

<div class="div1" id="diva"></div>
<div class="div2" >

   <form  onsubmit="return tijiaopanduan()">
       <br/>
       <table >
           <tr>
                <td>&nbsp&nbsp</td>
               <td>  用户名：</td>
               <td><input type="text" name=text" id="uname" value="" class="input1" onblur="yzname()" />
                   &nbsp&nbsp <span id="namespan">*2-4位汉字</span></td>
               <td></td>

           </tr>
           <tr><td>&nbsp&nbsp</td></tr>
           <tr>
               <td>&nbsp&nbsp </td>
               <td> 密码：</td>
               <td><input type="password" name="" id="password" value="" class="input1" alt="密码" onblur="passwordtext()" />
               <span id="passwordspan">*6到10位数字之间</span>
               </td>
               <td></td>
           </tr>
           </tr>
           <tr><td>&nbsp&nbsp</td></tr>
           <tr>
           <tr>
               <td>&nbsp&nbsp </td>
               <td>  手机号码：</td>
               <td><input type="text" name="" id="phone" value="" alt="手机号码" class="input1" onblur="phonetext()"/>
               <span id="phonespan"></span></td>
               <td></td>
           </tr>
           </tr>
           <tr><td>&nbsp&nbsp</td></tr>
           <tr>
           <tr>
               <td>&nbsp&nbsp </td>
               <td>邮箱：</td>
               <td><input type="email" name="email" id="email" value="" alt="邮箱" class="input1" onblur="emailtext()"/>
               <span id="emailspan"></span></td>
               <td></td>
           </tr>
           </tr>
           <tr><td>&nbsp&nbsp</td></tr>
           <tr>
           <tr>
               <td>&nbsp&nbsp </td>
               <td> 性别：</td>
               <td><input type="radio" name="radio" id="1" value="男" class="input1" />男<input type="radio" name="radio" id="2" value="女" class="input1" />女</td>
               <td></td>
           </tr>
           </tr>
           <tr><td>&nbsp&nbsp</td></tr>
           <tr>
           <tr>
               <td>&nbsp&nbsp </td>
               <td> 籍贯：</td>
               <td><select name="Jg" class="input1" s>
                   <option value="">--籍贯--</option>
                   <option value="福建">福建</option>
                   <option value="广西">广西</option>
                   <option value="陕西">陕西</option>
                   <option value="山西">山西</option>
                   <option value="北京">北京</option>
                   <option value="上海">上海</option>
                   <option value="西藏">西藏</option>
                   <option value="维吾尔">维吾尔</option>
                   <option value="内蒙古">内蒙古</option>
                   <option value="浙江">浙江</option>
                   <option value="江西">江西</option>
                   <option value="湖南">湖南</option>
                   <option value="湖北">湖北</option>
                   <option value="黑龙江">黑龙江</option>
                   <option value="青海">青海</option>
                   <option value="山西">山西</option>
              </select>
               <td></td>
           </tr>
           <tr><td>&nbsp&nbsp</td></tr>
           <tr>
               <td>&nbsp&nbsp </td>
               <td> 兴趣爱好：</td>
               <td><input type="checkbox" name="checkbox" id="checkbox1" value="篮球"  class="input1" onclick="favtext()"/>篮球
                   <input type="checkbox" name="checkbox" id="checkbox2" value="乒乓球"  class="input1" onclick="favtext()"/>乒乓球
                   <input type="checkbox" name="checkbox" id="checkbox3" value="羽毛球" class="input1" onclick="favtext()"/>羽毛球
                   <input type="checkbox" name="checkbox" id="checkbox4" value="唱歌"  class="input1" onclick="favtext()"/>唱歌<br/>
                   <input type="checkbox" name="checkbox" id="checkbox5" value="吉他"  class="input1" onclick="favtext()"/>吉他
                   <input type="checkbox" name="checkbox" id="checkbox6" value="口琴"  class="input1" onclick="favtext()"/>口琴
                   <input type="checkbox" name="checkbox" id="checkbox8" value="街舞"  class="input1" onclick="favtext()"/>街舞
                   <input type="checkbox" name="checkbox" id="checkbox9" value="炒菜"  class="input1" onclick="favtext()"/>炒菜

               </td>
               <td><span id="checkboxspan"></span></td>
           </tr>
           <tr>
               <td>&nbsp&nbsp </td>
               <td> 个人介绍：</td>
               <td>
                   <textarea style="width:190px;height:50px; resize: none ; " class="input1"  >说出优点给自己鼓鼓劲！</textarea>
               </td>
               <td></td>
           </tr>
           <tr>
               <td>&nbsp</td>
               <td>验证码：</td>
               <td><input type="text" name="text" id="asas" style="width: 50px" onload="yzmmtext()">&nbsp&nbsp&nbsp
               <span  id="span1" onclick="yzmtext()" style="cursor:pointer;background: darkgray"></span>
                   <span id="yzmspan"></span>
               </td>
               <td></td>
           </tr>


       </table>
       <br/>
       <table>
           <tr>
           <td>&nbsp&nbsp</td>
           <td>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="checkbox" name="" id="chk" onclick="checkboxtext()"><a href="#" style="color: darkblue" >同意本协议</a></td>

           <td>
               &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
               <input type="submit" name="submit" id="sub" value="注册" style="width:70px ; height:40px; background: indianred" disabled="disabled" />
           </td>
       </tr></table>
 </form>

</div>
</body>
</html>
